<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120">
            <Row class="query-form">
                <Col span="8">
                   <!-- <FormItem label='负责工作：'>
                        <Select multiple v-model='dataToQuery.resWorks'>
                            <Option value="1">安全</Option>
                            <Option value="0">环保</Option>
                        </Select>
                    </FormItem>-->
                    <FormItem label='职务或岗位：' prop='persition'>
                        <Select multiple :max-tag-count="2" v-model='dataToQuery.persitionId'>
                            <Option v-for="item in persitionIds" :value="item.codingCodeId"
                                    :key="item.codingCodeId">{{item.codingName }}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="9">
                    <FormItem label="文化程度：">
                        <Select multiple :max-tag-count="2" v-model='dataToQuery.eduIds'>
                            <Option v-for="item in educations" :value="item.codingCodeId" :key="item.codingCodeId"
                                    :lable="item.codingName">{{item.codingName }}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="7" v-if="!switchFlag">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset1" class="ivu-btn-reset">重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
                <Col span="7" v-else>
                    <FormItem label="年龄范围：">
                        <InputNumber :min="0" style="width: 40%" v-model='dataToQuery.age1'/> <span style="width:1%;text-align:center">-</span>
                        <InputNumber :min="dataToQuery.age1" style="width: 40%;text-align: right" v-model='dataToQuery.age2'/>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <!--<Col span="8">
                    <FormItem label='职务或岗位：' prop='persition'>
                        <Select multiple v-model='dataToQuery.persitionId'>
                            <Option v-for="item in persitionIds" :value="item.codingCodeId"
                                    :key="item.codingCodeId">{{item.codingName }}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="性别：">
                        <Select multiple v-model='dataToQuery.genderId'>
                            <Option value="M" lable="男">男</Option>
                            <Option value="F" lable="女">女</Option>
                        </Select>
                    </FormItem>
                </Col>-->
                <Col span="8" :offset="16">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset1" class="ivu-btn-reset">重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
        </Form>
		<Row style="margin-right:10px; margin-top: 5px;">
			<Col span="24">
				<Card dis-hover>
				    <div ref="staffContainer" style="height: 300px;"></div>
				</Card>
			</Col>
		</Row>
        <Table ref='table' :height='this.Common.tableHeightNum' no-data-text="没有查询到相关数据!" :loading='pageStatus.loading'
               border :columns="columns1" :data="dataTable">
        </Table>
        <!--<Row style="margin-right:10px;">
            <Col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
                      @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>-->

    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    import {sessionStorage, cookie} from '@/common/cacheUtils.js';
    import pageCommonFunction from '@/components/pageCommonFunction.js'
	import echarts from 'echarts';

    export default {
        data() {
            return {
                ...this.createCommonDataField(),
                columns1: [
                    {title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    {key: 'orgName', title: '单位名称', fixed: 'left', align: 'center', minWidth: 200,},
                    {key: 'staffSum', title: '人员总数', align: 'center', minWidth: 100,},
                    {title: '人员数量', align: 'center', minWidth: 120,
                        children: [
                            {
                                title: '专/兼职',
                                align: 'center',
                                children: [
                                    {
                                        title: '专职',
                                        key: 'fullworkNum',
                                        align: 'center',
                                        minWidth: 80
                                    },
                                    {
                                        title: '兼职',
                                        key: 'partWorkNum',
                                        align: 'center',
                                        minWidth: 80
                                    },
                                ]
                            },
                            {
                                title: '负责工作',
                                align: 'center',
                                children: [
                                    {
                                        title: '安全',
                                        key: 'securityNum',
                                        align: 'center',
                                        minWidth: 80
                                    },
                                    {
                                        title: '环保',
                                        key: 'environmentNum',
                                        align: 'center',
                                        minWidth: 80
                                    },
                                    {
                                        title: '安全和环保',
                                        key: 'secEnvNum',
                                        align: 'center',
                                        minWidth: 80
                                    },
                                ]
                            },
                            {
                                title: '性别',
                                align: 'center',
                                children: [
                                    {
                                        title: '男',
                                        key: 'mNum',
                                        align: 'center',
                                        minWidth: 80
                                    },
                                    {
                                        title: '女',
                                        key: 'fNum',
                                        align: 'center',
                                        minWidth: 80
                                    },
                                ]
                            },
                            ]
                    },
                ],
                tableHeight: 10,
                persitionIds: [],
                educations: [],
                careerQulifys: [],
                // api
                queryUrl: Api.saStaffStatistics,
				statistical:{}
            }
        },
        mounted() {
            this.dataToQuery.age1=0
            this.dataToQuery.age2=null
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query();
            let _this=this
            this.gDic(Api.queryCodeDetailBySortId + "/1000001032", function (result) {
                _this.educations = result;
            });
            this.gDic(Api.queryCodeDetailBySortId + "/env-00003", function (result) {
                _this.persitionIds = result;
            });
        },
        methods: {
            ...pageCommonFunction,
            query() {
                if (this.dataToQuery.resWorks != null && this.dataToQuery.resWorks != undefined && this.dataToQuery.resWorks.length < 1) {
                    this.dataToQuery.resWorks=null
                }
                if (this.dataToQuery.eduIds != null && this.dataToQuery.eduIds != undefined && this.dataToQuery.eduIds.length < 1) {
                    this.dataToQuery.eduIds=null
                }
                if (this.dataToQuery.persitionId != null && this.dataToQuery.persitionId != undefined && this.dataToQuery.persitionId.length < 1) {
                    this.dataToQuery.persitionId=null
                }
                // this.queryAjax();
				this.pageStatus.loading = true
				let data = {
				    startPage: this.pagedata.currentPage,
				    size: this.pagedata.pageSize,
				    conditions: this.dataToQuery
				};
				
				this.$http.post(this.queryUrl, data).then((res) => {
				    if (res.data.status === 201) {
				        this.$Message.error(res.data.msg);
				    }
				    this.dataTable = res.data.data.data;
				    this.pagedata.total = res.data.data.totalSize;
				    this.pageStatus.loading = false
					this.chartStatistical()
				}).catch(e => {
				    this.$Message.error("数据获取失败")
				    this.pageStatus.loading = false
				})
            },
            reset1(){
                this.dataToQuery = {
                    age1:0,
                    age2:null
                };
                this.pagedata.currentPage=1
                this.query()
            },
			
			chartStatistical(){
				this.statistical = {
					companyName:[],
					staffSum:[],
					fullworkNum:[],
					partWorkNum:[],
					securityNum:[],
					environmentNum:[],
					secEnvNum:[],
					mNum:[],
					fNum:[]
				}
				for (var i = 0; i < this.dataTable.length; i++) {
					let item = this.dataTable[i]
					this.statistical.companyName.push(item.orgName)
					this.statistical.staffSum.push(item.staffSum)
					this.statistical.fullworkNum.push(item.fullworkNum)
					this.statistical.partWorkNum.push(item.partWorkNum)
					this.statistical.securityNum.push(item.securityNum)
					this.statistical.environmentNum.push(item.environmentNum)
					this.statistical.secEnvNum.push(item.secEnvNum)
					this.statistical.mNum.push(item.mNum)
					this.statistical.fNum.push(item.fNum)
				}
				let container = echarts.init(this.$refs.staffContainer);
				let option = this.getOption();
				container.setOption(option);
				window.onresize = container.resize;
			},
			getOption(){
			    let option = {
			        tooltip: {	//提示框组件
			                trigger: 'axis',
			                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
			                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			                }
			            },
			            legend: {	//图例组件
			                data: ['人员总数','专职','兼职','安全','环保','安全和环保','男','女']
			            },
						color:['#FD5C50','#FF9800', '#FDD835', '#40C4FF', '#FF3E80', '#42A5F5', '#FFC310', '#1DE9B6','#6666CC','#66CC66'],
			            grid: {
			                left: '3%',
			                right: '3%',
			                bottom: '8%',
			                containLabel: true,
			            },
						dataZoom: [{
						        type: 'inside'
						    }, {
						        type: 'slider',
								textStyle:false
						    }],
			            xAxis: [
			                {
			                    type: 'category',
								data: this.statistical.companyName,
								axisLabel: {
								            interval: 0,
								            formatter:function(value){  
								                var str = ""; 
								                var num = 6; //每行显示字数 
								                var valLength = value.length; //该项x轴字数  
								                var rowNum = Math.ceil(valLength / num); // 行数  
								                if(rowNum > 1) {
								                    for(var i = 0; i < rowNum; i++) {
								                        var temp = "";
								                        var start = i * num;
								                        var end = start + num;
								                        temp = value.substring(start, end) + "\n";
								                        str += temp; 
								                    }
								                    return str;
								                } else {
								                    return value;
								                } 
								            }
								        }
			                }
			            ],
			            yAxis: [
			                {
			                    type: 'value'
			                }
			            ],
			            series: [
			                {
			                    name: '人员总数',
			                    type: 'bar',
			                    emphasis: {
			                        focus: 'series'
			                    },
								data: this.statistical.staffSum
			                },
							{
							    name: '专职',
							    type: 'bar',
								stack: '专/兼职',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.fullworkNum
							},
							{
							    name: '兼职',
							    type: 'bar',
								stack: '专/兼职',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.partWorkNum
							},
							{
							    name: '安全',
							    type: 'bar',
								stack: '负责工作',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.securityNum
							},
							{
							    name: '环保',
							    type: 'bar',
								stack: '负责工作',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.environmentNum
							},
							{
							    name: '安全和环保',
							    type: 'bar',
								stack: '负责工作',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.secEnvNum
							},
							{
							    name: '男',
							    type: 'bar',
								stack: '性别',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.mNum
							},
							{
							    name: '女',
							    type: 'bar',
								stack: '性别',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.fNum
							}
			            ]
			    };
			    return option;
			}

        },
        computed: {},

    }
</script>

<style lang='css' scoped>
    @import '../../../index.css';
</style>
